<template>
	<view>
		<wuc-tab :tab-list="tabList" textFlex :tabCur.sync="tabCur" tab-class="tabBasic" select-class="tabSelected"></wuc-tab>
		<swiper :current="tabCur" class="swiper" duration="300" :circular="false" indicator-color="rgba(0,0,0,0)"
		 indicator-active-color="rgba(0,0,0,0)" @change="swiperChange" :style="{height:swiperHeight}">
			<swiper-item class="swiper-billDetail" id="swiper">
				<view class="billDetail-warn">
					<view v-for="(item,index) in warnList" :key="index" class="billDetail-warn-item">
						<icon-svg :icon-class="item.leftIcon" style="margin-right: 10rpx;color: #FEAD65;" />{{item.text}}
						<icon-svg :icon-class="item.RightIcon" class="fr" />
					</view>
				</view>
				<view class="billDetail-status">
					<view class="billDetail-status-line1">
						<text class="circle"></text>
						审批中
					</view>
					<view class="billDetail-status-line2">
						<text class="status-line2-date">今天17：36</text>
						<text class="status-line2-name">陈赫斯</text><text>提交送审</text>
					</view>
				</view>
				<view class="billDetail-main">
					<view class="billDetail-main-item" v-for="item in billDetailItemList" :key="item.header ">
						<view class="main-item-header" v-if="item.header">
							{{item.header}}:
						</view>
						<view class="main-item-body">
							<icon-svg v-if="item.left_icon" :icon-class="item.left_icon" class="body-icon" />
							{{item.body}}
							<icon-svg v-if="item.right_icon" :icon-class="item.right_icon" class="fr" />
						</view>
					</view>
				</view>
				<view class="billDetail-list">
					<view class="billDetail-list-header">
						<view class="list-header">
							<text>费用明细·2·明细列表</text>
							<icon-svg icon-class="icon-test6"></icon-svg>
						</view>
						<view class="list-header">
							<text>合计总额</text><text class="fr" style="font-weight: 600;color:#FC982D">CNY 2,000.00</text>
						</view>
					</view>
					<!-- <view class="relateApply">
						<view class="relateApply-body" v-for="item in share"style="margin-bottom: 30rpx;" :key="item.id ">
							<navigator :url="item.url">
							<view class="center">
								<view class="center-line1">
									<text style="font-weight: 600;">{{item.name}}</text><text style="float: right;font-weight: 600;">{{item.money}}</text>
								</view>
								<view class="center-line2">
									<text style="font-size: 30rpx;color: #333;">{{item.id}}</text>
								</view>
							</view>
							</navigator>
						</view>
					</view> -->
					<view class="billDetail-list-costList">
						<navigator :url="item.url" v-for="item in costData" :key="item.type">
							<view class="costItem">
								<view class="costItem-left">
									<icon-svg :icon-class="item.icon"></icon-svg>
								</view>
								<view class="costItem-right">
									<view class="costItem-line1" v-if="item.type">
										<text>{{item.type}}</text>
										<text style="font-weight: 200;">{{item.id}}</text>
										<text class="fr" style="color:#333">CNY {{item.money}}</text>
									</view>
									<!-- <view class="costItem-line2" v-if="item.location">
										<text>{{item.location}}</text>
									</view>
									<view class="costItem-line3" v-if="item.time">
										<text>{{item.time}}</text>
									</view>
									<view class="costItem-line4">
										消费事由：
									</view>
									<view class="costItem-line5">
										无
									</view> -->
								</view>
							</view>
						</navigator>
					</view>
				</view>
				<view class="relateApply" style="margin-top: 30rpx;">
					<view class="relateApply-header">
						关联申请:
					</view>
					<view class="relateApply-body" v-for="item in relateApply" :key="item.id">
						<view class="center">
							<view class="center-line1">
								<text style="font-weight: 600;">{{item.name}}</text><text style="float: right;font-weight: 600;">￥{{item.money}}</text>
							</view>
							<view class="center-line2">
								<text style="font-size: 14px;color: #333;">{{item.id}}</text><text style="float: right;color: #333;font-size: 14px;">申请金额</text>
							</view>
						</view>
					</view>
				</view>
				<view class="relateApply">
					<view class="relateApply-header">
						核销借款(1)
					</view>
					<view class="relateApply-body" v-for="item in loan" :key="item.id">
						<view class="center">
							<view class="center-line1">
								<text style="font-weight: 600;">{{item.name}}</text><text style="float: right;font-weight: 600;">￥{{item.money}}</text>
							</view>
							<view class="center-line2">
								<text style="font-size: 14px;color: #333;">{{item.id}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="billDetail-count">
					<view class="count-item">
						<view class="count-item-line1">
							<text>报销金额</text><text class="fr" style="font-size: 30rpx;font-weight: 600;">CNY 2000.00</text>
						</view>
						<view class="count-item-line2">
							<text class="fr">贰仟元整</text>
						</view>
					</view>
					<view class="count-item">
						<view class="count-item-line1">
							<text>核销金额</text><text class="fr" style="font-size: 30rpx;font-weight: 600;">CNY -2000.00</text>
						</view>
						<view class="count-item-line2 ">
							<text class="fr">贰仟元整</text>
						</view>
					</view>
					<view class="count-item">
						<view class="count-item-line1">
							<text>支付金额</text><text class="fr" style="font-size: 30rpx;font-weight: 600;">CNY 0.00</text>
						</view>
						<view class="count-item-line2 ">
							<text class="fr">零元整</text>
						</view>
					</view>
				</view>
				<view class="billDetail-Id">
					单号#S20000005
				</view>
			</swiper-item>
			<swiper-item class="swiper-ApprovalFlow">
				<approval-flow/>
			</swiper-item>
			<swiper-item class="swiper-budgetOccupy">
				<budget/>
			</swiper-item>
		</swiper>
		<view id="footer">
			<text class="footer-item" @tap="taptext($event,0)">
				<icon-svg icon-class="xiangqing" id="xiangqing" /></text>
			<text class="footer-item">评论</text>
			<text class="footer-item">催办</text>
			<text class="footer-item">收回</text>
			<!-- <text class="footer-item" @tap="taptext($event,0)"> -->
				<!-- <icon-svg icon-class="xiangqing" id="xiangqing" /></text>
			<text class="footer-item"></text>
			<text class="footer-item"></text>
			<text class="footer-item">审批</text> -->
		</view>
		<chunLei-popups v-model="showPop" :popData="popData" @tapPopup="tapPopup" :x="popX" :y="popY" direction="column"
		 theme="light" dynamic placement="bottom-start" />
	</view>
</template>

<script>
	import chunLeiPopups from "@/components/chunLei-popups/chunLei-popups.vue";
	import budget from  "./budgetOccupation.vue"
	import approvalFlow from './approvalFlow.vue'
	export default {
		onReady() {
			const swiper = uni.createSelectorQuery().in(this).select('#swiper');
			swiper.boundingClientRect(data => {
				this.swiperHeight = `${data.height}px`
			}).exec()

		},
		onPageScroll() {
			for (let i = 0; i < 6; i++) {
				this.showPop = false
			}
		},
		data() {
			return {
				tabCur: 0,
				swiperHeight: '',
				showPop: false,
				popX: 0,
				popY: 0,
				popData: [{
					title: '复制'
				}, {
					title: '打印'
				}],
				tabList: [{
					name: '单据详情'
				}, {
					name: '审批流程'
				}, {
					name: '预算占用'
				}],
				warnList: [{
					leftIcon: 'jinggao',
					text: '单据有两处风险，请注意',
					RightIcon: 'icon-test4'
				}, {
					leftIcon: '',
					text: '1、陈赫斯 有借款即将到期',
					RightIcon: 'icon-test7'
				}, {
					leftIcon: '',
					text: '2、陈赫斯 有借款逾期未还',
					RightIcon: 'icon-test7'
				}],
				billDetailItemList: [{
						header: '报销事由',
						body: '出差报销',
					},
					{
						header: '报销人',
						body: '陈赫斯',
					},
					{
						header: '报销单位',
						body: '时代邻里股份有限公司',
					},
					{
						header: '报销部门',
						body: '公共部门',
					},
					{
						header: '报销金额',
						body: '¥2000.00',
					},
					{
						header: '报销日期',
						body: '2020-12-29 10:00',
					},
					{
						header: '',
						body: '分摊',
						left_icon: 'fangkuang',
					},
					{
						header: '收款人',
						body: '陈赫斯',
					},
					{
						header: '收款信息',
						body: '邮政银行  4654  (广州...)',
						left_icon: 'youzhengyinhang',
						right_icon: 'icon-test6'
					},
					{
						header: '预算承担单位',
						body: '时代邻里股份有限公司',
					},
					{
						header: '预算承担部门',
						body: '公共部门',
					},
					{
						header: '预算承担项目',
						body: '佛山项目',
					}
				],
				costData: [{
					icon: 'zhusu',
					type: '住宿费',
					id: 'COST3',
					location: '广东省/深圳市/深圳市区-上海..',
					time: '2020-12-27 ~ 2020-12-27',
					money: '1,500.00',
					url:'./stayCostDetail'
				}, {
					icon: 'feiji4',
					type: '机票费',
					id: 'COST50',
					time: '无消费日期',
					money: '500.00',
					url:'./travelCostDetail'
				}],
				relateApply:[{
						id: 'S20000001 2020-10-16',
						name: '差旅费申请',
						money: '2000.00',
					}],
					loan:[{
						id: '无还款期限',
						name: '差旅费申请',
						money: '2000.00',
					}],
					share:[{
						id: '金额 : ￥1000.00',
						name: '市场部',
						money: '比例：50%',
						url:'./shareDetail'
					},{
						id: '金额 : ￥1000.00',
						name: '业务部',
						money: '比例：50%',
						url:'./shareDetail2'
					}]
			};
		},
		methods: {
			tabChange(index) {
				this.tabCur = index;
			},
			swiperChange(e) {
				let {
					current
				} = e.target;
				this.tabCur = current;
			},
			tooltipClick() {
				this.tooltipConfig.tooltipShow = false;
			},
			tapPopup(e) {
				uni.showToast({
					title: e.title,
					icon: 'none'
				})
			},
			taptext(e, index) {
				this.popX = e.touches[0].clientX
				this.popY = e.touches[0].clientY

				this.showPop = !this.showPop
			}
		},
		components: {
			chunLeiPopups,
			budget,
			approvalFlow
		}
	}
</script>

<style lang="scss" scoped>
	page {
		color: $uni-text-color;
	}

	.fr {
		float: right;
	}

	.tabBasic {
		font-size: 30rpx;
		background-color: white;
	}

	.tabSelected {
		color: #E14C46;
		border-bottom: none;
	}

	.swiper-billDetail {
		height: auto !important;
	}

	.billDetail-warn-item {
		background-color: $warnBackgroundColor;
		padding: 20rpx;
		border-bottom: 1px solid $underline;
	}

	.circle {
		display: inline-block;
		width: 15rpx;
		height: 15rpx;
		border-radius: 50%;
		background-color: #1D89E4;
		margin-right: 10rpx;
	}

	.billDetail-status {
		padding: 30rpx;
		margin-bottom: 20rpx;
		background-color: white;

		.billDetail-status-line1 {
			font-size: 30rpx;
		}

		.billDetail-status-line2 {
			margin-top: 10rpx;
			color: $uni-text-color-grey;

			.status-line2-date {
				margin-right: 10rpx;
				font-size: 18rpx;
			}

			.status-line2-name {
				color: $uni-text-color;
			}
		}
	}

	.billDetail-main {
		padding: 30rpx;
		background-color: white;

		.billDetail-main-item {
			border-bottom: 1rpx solid $underline;
			margin-bottom: 20rpx;

			.main-item-header {
				color: $uni-text-color-grey;
				margin-bottom: 20rpx;

				&:before {
					content: '* ';
					color: red;
				}
			}

			.main-item-body {
				margin-bottom: 50rpx;
				margin-left: 25rpx;
			}
		}
	}

	.billDetail-list {
		margin-top: 30rpx;
		background-color: white;

		.billDetail-list-header {
			padding: 30rpx;

			.list-header {
				height: 70rpx;
				line-height: 70rpx;
				border-bottom: 1rpx solid $underline;
			}
		}

		.billDetail-list-costList {
			.costItem {
				padding-top: 30rpx;
				height: 120rpx;
				display: flex;
				border-bottom: 1rpx solid $underline;

				.costItem-left {
					width: 100rpx;
					text-align: center;
					font-size: 80rpx;
					margin-right: 30rpx;
				}

				.costItem-right {
					flex: 1;
					margin-right: 50rpx;
					line-height: 110rpx;
					.costItem-line1 {
						font-size: 35rpx;
						font-weight: 600;

					}

					.costItem-line2 {
						font-size: 30rpx;
						color: $uni-text-color-grey;
						height: 40rpx;
					}

					.costItem-line3 {
						font-size: 30rpx;
						color: $uni-text-color-grey;
						height: 40rpx;
					}

					.costItem-line4 {
						font-size: 30rpx;
						color: $uni-text-color-grey;
						height: 40rpx;
					}

					.costItem-line5 {
						font-size: 30rpx;
						color: black;
						height: 40rpx;
					}
				}
			}
		}
	}

	.billDetail-count {
		font-weight: 600;
		background-color: white;
		padding: 30rpx;
		margin-top: 50rpx;

		.count-item {

			.count-item-line1 {
				height: 60rpx;
				line-height: 60rpx;
			}

			.count-item-line2 {
				height: 60rpx;
				line-height: 60rpx;
				color: $uni-text-color-grey;
				font-weight: 200;
			}
		}
	}

	.billDetail-Id {
		height: 200rpx;
		line-height: 200rpx;
		color: $uni-text-color-grey;
		text-align: center;
		margin-bottom: 100rpx;
	}

	#footer {
		position: sticky;
		bottom: 0;
		background-color: white;
		height: 80rpx;
		display: flex;
		line-height: 80rpx;
		font-size: 40rpx;

		.footer-item {
			flex: 1;
			text-align: center;

			&:last-child {
				background-color: $themeColor;
				color: white;
				border-radius: 30rpx;
			}
		}
	}
	.relateApply {
		padding: 40rpx;
		background-color: white;
		border-bottom: 1rpx solid $underline;
	
		.relateApply-header {
			height: 60rpx;
			line-height: 60rpx;
		}
	
		.relateApply-btn {
			color: $themeColor;
		}
	
	}

</style>
